<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24" style="padding-top: 0px">
          <a-col :md="6" :sm="8">
            <a-form-item label="工单号" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
              <a-input placeholder="工单号" v-model="queryParam.woNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="18" :sm="16">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">

              <a-button type="primary" @click="searchQuery" icon="search" >查询</a-button>
              <a-button type="primary" @click="showOrClose" icon="search" style='margin-left: 10px;'>高级查询</a-button>
              <a-button @click="handleAdd" type="primary" icon="plus" style='margin-left: 10px;'>新增</a-button>
              <a-button type="primary" icon="download" @click="handleExportXls('eip_work_order')" style='margin-left: 10px;'>导出</a-button>
              <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel" style='margin-left: 10px;'>
              <a-button type="primary" icon="import">导入</a-button>
              </a-upload>
              <a-dropdown v-if="selectedRowKeys.length > 0">
              <a-menu slot="overlay">
                <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
              </a-menu>
              <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down"/></a-button>
              </a-dropdown>
            </span>
          </a-col>
        </a-row>
      </a-form>

    </div>
    <a-row v-if="show" style="padding-top: 0px">
      <a-col :md="6" :sm="8">
        <a-form-item label="生产订单号" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
          <a-input placeholder="生产订单号" v-model="queryParam.ipoNo"></a-input>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="种类编码" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
          <j-dict-select-tag style="width: 260px" v-model="queryParam.subclassCode" placeholder="请选择种类编码" dictCode="subclassCode"/>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="厂家物料描述" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
          <a-input placeholder="厂家物料描述" v-model="queryParam.materialsDescription"/>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="工单状态" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
          <j-dict-select-tag style="width: 260px" v-model="queryParam.woStatus" placeholder="请选择工单状态" dictCode="woStatus"/>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="计划日期(起)" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }">
          <a-date-picker valueFormat="YYYY-MM-DD" v-model="queryParam.planStartDateBegin"></a-date-picker>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="计划日期(止)" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }">
          <a-date-picker valueFormat="YYYY-MM-DD" v-model="queryParam.planStartDateFinish"></a-date-picker>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="工艺路线编码" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
          <a-input placeholder="工艺路线编码" v-model="queryParam.processRouteNo"/>
        </a-form-item>
      </a-col>
    </a-row>
    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <!--      :scroll="{ x: 2000,y:700 }"-->
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="puid"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="ipagination"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <img v-if="record.remark1.indexOf('10001')>-1|| record.remark1.indexOf('10003')>-1" slot="pic" style="width: 20px;" slot-scope="text, record" src='../../../../assets/yellow.jpg' alt="">
        <img v-else slot="pic" style="width: 20px;" slot-scope="text, record" src='../../../../assets/green.jpg' alt="">

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">修改</a>
          <a-divider type="vertical"/>
          <a @click="toOperation(record)">关联生产报工</a>
          <a-divider type="vertical"/>
          <a @click="toWorkOrderDetail(record)">详情</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.puid)">
                  <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>

    <eipWorkOrder-modal ref="modalForm" @ok="modalFormOk"/>
    <eipWorkOrder-detail v-if="showWorkOrderDetail" ref="EipWorkOrderDetail" :dataSourceDetail="dataSourceDetail" @close="closeDetail"/>
  </a-card>
</template>

<script>

  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import EipWorkOrderModal from './modules/EipWorkOrderModal'
  import EipWorkOrderDetail from '../../sjshjy/EipWorkOrder/modules/EipWorkOrderDetail'
  import { deleteAction, postAction, getAction, downFile } from '@/api/manage'

  export default {
    name: 'EipWorkOrderList',
    mixins: [JeecgListMixin],
    components: {
      EipWorkOrderModal,
      EipWorkOrderDetail
    },
    data() {
      return {
        value: ['平高电器'],
        description: 'eip_work_order管理页面',
        show: false,                    //高级查询
        showWorkOrderDetail: false,     //详情
        linkMessage: '正常',
        dateMessage: '正常',
        planStartDateBegin: null,
        planStartDateFinish: null,
        dataSource: [],                 //列表数据
        dataSourceDetail: {},           //详细数据
        // 列表数据表头
        columns: [
          {
            title: '状态',
            dataIndex: 'remark1',
            // fixed: 'left',
            key: 'pic',
            scopedSlots: {customRender: 'pic'}
          },
          {
            title: '供应商名称',
            align: 'center',
            dataIndex: 'supplierName'
          },
          {
            title: '工单号',
            align: 'center',
            dataIndex: 'woNo'
          },
          {
            title: '厂家物料描述',
            align: 'center',
            dataIndex: 'materialsDescription'
          }, {
            title: '工艺路线编码',
            align: 'center',
            dataIndex: 'processRouteNo'
          },
          {
            title: '计划开始日期',
            align: 'center',
            dataIndex: 'planStartDate',
            customRender: function (text) {
              return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
            }
          },
          {
            title: '计划完成日期',
            align: 'center',
            dataIndex: 'planFinishDate',
            customRender: function (text) {
              return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
            }
          },
          {
            title: '实际开始日期',
            align: 'center',
            dataIndex: 'actualStartDate',
            customRender: function (text) {
              return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
            }
          },
          {
            title: '实际完成日期',
            align: 'center',
            dataIndex: 'actualFinishDate',
            customRender: function (text) {
              return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: {customRender: 'action'}
          }
        ],

        url: {
          list: '/eipWorkOrder/list',
          delete: "/eipWorkOrder/logicalDelete",
          deleteBatch: "/eipWorkOrder/logicalDeleteBatch",
          selectByPuid: '/eipWorkOrder/selectByPuid',
          exportXlsUrl: '/eipWorkOrder/exportXls',
          importExcelUrl: "/eipWorkOrder/importExcel"
        },
        dictOptions: {}
      }
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['excelURL']}/${this.url.importExcelUrl}`;
        // return `http://10.89.33.69:8088/jeecg-boot/${this.url.importExcelUrl}`;      }
      }
    },
    methods: {
      //高级查询是否展开
      showOrClose() {
        this.show = !this.show
      },
      //详情
      closeDetail() {
        this.showWorkOrderDetail = false
      },
      //跳转报工信息
      toOperation(record) {
        localStorage.setItem('woNo', record.woNo)
        this.$router.push({path: '/sgtb/eipOperation/list'})
      },
      //工单详细信息
      toWorkOrderDetail(record) {
        this.showWorkOrderDetail = true
        this.dataSourceDetail = record
      },
      //加载工单
      loadData(arg) {
        if (arg === 1) {
          this.ipagination.current = 1
        }
        let params = {'pageNo': this.ipagination.current, 'pageSize': this.ipagination.pageSize}
        let puid = localStorage.getItem('puid')
        let ipoNo = localStorage.getItem('ipoNo')
        let woNo = localStorage.getItem('woNo')
        if (puid !== null) {
          this.queryParam.ipoNo = ipoNo
          params['puid'] = puid
          params['woNo'] = woNo
        } else if (ipoNo != null) {
          this.queryParam.ipoNo = ipoNo
          params['ipoNo'] = ipoNo
        } else {
          params = this.getQueryParams()//查询条件
        }
        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
        localStorage.removeItem('puid')
        localStorage.removeItem('ipoNo')
        localStorage.removeItem('woNo')
      }
    },
    watch: {
      value(val) {
        // if (val.indexOf('1000014563') != -1) {
        //   queryParam.org2 = val
        // }
        // if (val.indexOf('1000015019') != -1) {
        //   queryParam.org1 = val
        // }
        console.log(`selected:`, val)
      }
    }
  }

</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>